<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="./images/logo.png" alt="">
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class=""><a href="#">用户信息 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#" id="add-user">添加用户</a></li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="输入用户ID" id="user-id">
                    </div>
                    <button type="submit" class="btn btn-default" id="search-btn">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">退出登录</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">账号管理 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">切换用户</a></li>
                            <li><a href="#">个人中心</a></li>
                            <li><a href="#">账号管理</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">密码设置</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="container main">
        <table class="table  table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>电话号码</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="user-list" class="table-striped">
                <tr>
                    <th>1</th>
                    <th>周杰伦</th>
                    <th>男</th>
                    <th>13512341234</th>
                    <th>issac_1643@163.com</th>
                    <th>
                        <button type="button" class="btn btn-info btn-sm">详细</button>
                        <button type="button" class="btn btn-danger btn-sm">删除</button>
                    </th>
                </tr>

            </tbody>
        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination">
              <li>
                <a href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li class="active" data-page=1><a href="#" data-page=1>1</a></li>
              <li class="" data-page=2><a href="#" data-page=2>2</a></li>
              <li data-page=3><a href="#" data-page=3>3</a></li>
              <li data-page=4><a href="#" data-page=4>4</a></li>
              <li data-page=5><a href="#" data-page=5>5</a></li>
              <li>
                <a href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
            <select name="page-size" id="page-size">
                <option value="10">10/条每页</option>
                <option value="20" selected>20/条每页</option>
                <option value="40">40/条每页</option>
                <option value="100">100/条每页</option>
            </select>
          </nav>
    </div>

    <!-- alert Modal -->
    <div class="modal fade" id="modal-alert" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="z-index:1051;">
        <div class="modal-dialog" role="document" >
            <div class="modal-content" style="z-index:99;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">信息提示</h4>
                </div>
                <div class="modal-body">
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default cancle-btn"  data-dismiss="modal" >取消</button>
                    <button type="button" class="btn btn-primary ok-btn"  >确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="modal-detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">用户详细信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="user-detail">
                        <div class="form-group" style="display: none;">
                            <label for="u-id" class="col-sm-2 control-label">ID</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="u-id" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="username" class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="username" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="nickname" class="col-sm-2 control-label">昵称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="nickname" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="email" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="telephone" class="col-sm-2 control-label">电话号码</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="telephone" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="birthday" class="col-sm-2 control-label">生日</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="birthday" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">权限</label>
                            <div class="col-sm-10">
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="0" name="permission" disabled> 登陆
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="1" name="permission" disabled> 发帖
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="2" name="permission" disabled> 管理帖子
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="3" name="permission" disabled> 管理版面
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="telephone" class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">
                                <label class="male">
                                    <input type="radio" name="gender" id="male" value="0" disabled> 男
                                </label>
                                <label class="female">
                                    <input type="radio" name="gender" id="female" value="1" disabled> 女
                                </label>

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="state" class="col-sm-2 control-label">状态</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="state" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="addr" class="col-sm-2 control-label">地址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="addr" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="login-time" class="col-sm-2 control-label">上次登录时间</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="login-time" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="intro" class="col-sm-2 control-label">介绍</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" id="intro" rows="5" style="resize: none;"
                                    readonly></textarea>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default cancle-btn"  data-dismiss="modal" id="cancle-btn">取消</button>
                    <button type="button" class="btn btn-primary ok-btn"  id="ok-btn">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/admin.js"></script>
    <script src="./js/swal.min.js"></script>
    <script src="./js/myalert.js"></script>
    <!-- <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> -->
</body>

</html>